<template>
  <div class="clock_compass">
    <div class="year_box">{{ year }}</div>
    <div
      v-for="(item, i) in 12"
      :key="item"
      class="month_box"
      :class="item === month ? 'now_date' : ''"
      :style="{
        transform: 'rotate(' + (i * 30 - month360) + 'deg)'
      }"
    >
      {{ item }}月
    </div>
    <div
      v-for="(item, i) in 31"
      :key="item"
      class="day_box"
      :class="item === day ? 'now_date' : ''"
      :style="{
        transform: 'rotate(' + (i * 11.61 - day360) + 'deg)'
      }"
    >
      {{ item }}日
    </div>
    <div
      v-for="(item, i) in 24"
      :key="item"
      class="hour_box"
      :class="i === hour ? 'now_date' : ''"
      :style="{
        transform: 'rotate(' + (i * 15 - hour360) + 'deg)'
      }"
    >
      {{ i }}时
    </div>
    <div
      v-for="(item, i) in 60"
      :key="item"
      class="minute_box"
      :class="i === minute ? 'now_date' : ''"
      :style="{
        transform: 'rotate(' + (i * 6 - minute360) + 'deg)'
      }"
    >
      {{ i }}分
    </div>
    <div
      v-for="(item, i) in 60"
      :key="item"
      class="second_box"
      :class="i === second ? 'now_date' : ''"
      :style="{
        transform: 'rotate(' + (i * 6 - second360) + 'deg)'
      }"
    >
      {{ i }}秒
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const year = ref('');
const month = ref(0);
const day = ref(0);
const hour = ref(0);
const minute = ref(0);
const second = ref(0);
const month360 = ref(0);
const day360 = ref(0);
const hour360 = ref(0);
const minute360 = ref(0);
const second360 = ref(0);

let intervalId: any;
onMounted(() => {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      router.back();
      globalThis.api.setWindowSize();
    }
  });

  intervalId = setInterval(transformBox, 1000);
});

const transformBox = () => {
  const nowDate = new Date();
  year.value = `${nowDate.getFullYear()}年`;
  month.value = nowDate.getMonth() + 1; // 月份从0开始，需要加1
  day.value = nowDate.getDate();
  hour.value = nowDate.getHours();
  minute.value = nowDate.getMinutes();
  second.value = nowDate.getSeconds();

  // 更新旋转角度
  month360.value = (360 / 12) * (month.value - 1);
  day360.value = (360 / 31) * (day.value - 1);
  hour360.value = (360 / 24) * hour.value;
  minute360.value = (360 / 60) * minute.value;
  second360.value = (360 / 60) * second.value;

  // 使用 Vue 的响应式特性更新样式
  // 注意：这里假设你有相应的 CSS 类或内联样式来处理旋转
};

onUnmounted(() => {
  // 清除定时器以防止内存泄漏
  clearInterval(intervalId);
});
</script>
<style scoped lang="less">
.clock_compass {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.year_box {
  height: 15%;
  width: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  transition: 1s;
  background-image: linear-gradient(to top, rgb(255, 0, 0), rgb(120, 8, 220));
  background-size: 100% 20px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-app-region: drag;
}

.month_box,
.day_box,
.hour_box,
.minute_box,
.second_box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 50%;
  transition: 1s;
}

.month_box {
  height: 25%;
  width: 25%;
}

.day_box {
  height: 40%;
  width: 40%;
}

.hour_box {
  height: 55%;
  width: 55%;
}

.minute_box {
  height: 70%;
  width: 70%;
}

.second_box {
  height: 85%;
  width: 85%;
}

.now_date {
  color: red;
}
</style>
